Estoy tratando de conectar mis propios botones personalizados a un carrusel de flickity en una aplicación nuxt. En mi componente de carrusel tengo este código
<template> <ClientOnly> <Flickity ref="flickity" :key="keyIncrementer" class="carousel" :class="{ 'carousel--active': active }" :options="computedOptions" > <slot /> </Flickity> </ClientOnly> </template> <script> export default { beforeCreate() { var flkty = new Flickity(".carousel"); // previous var previousButton = document.querySelector('.button--previous') previousButton.addEventListener('click', function () { flkty.previous() }) // next var nextButton = document.querySelector('.button--next') nextButton.addEventListener('click', function () { flkty.next() }) }, beforeDestroy() { window.removeEventListener('resize', this.debounceRefresh) nextButton.removeEventListener('click', function () { flkty.next() }) previousButton.removeEventListener('click', function () { flkty.previous() }) }, } </script>En mi carpeta de complementos tengo un archivo vue-flickity.js
import Vue from 'vue' import Flickity from 'vue-flickity' Vue.component('Flickity', Flickity) Sin intentar usar mis propios botones personalizados, el carrusel funciona bien. Pero con los botones personalizados recibo un mensaje de error ReferenceError Flickity is not defined para esta línea => var flkty = new Flickity(".carousel"); y Missing stack frames Obviamente estoy haciendo algo mal aquí, pero ¿qué?
Su uso de Flickity en el new Flickity() asume que el constructor de Flickity (del paquete flickity ) está definido globalmente (quizás por vue-flickity ), pero ese no es el caso. Además, flickity y vue-flickity no están destinados a usarse simultáneamente de esa manera.
Para vincular los métodos next / previous vue-flickity como controladores para sus propios botones, use los controladores @click en los botones que llaman this.$refs.flickity.next() / this.$refs.flickity.previous() :
<Flickity ref="flickity" class="carousel">...</Flickity> <button @click="next">Next</button> <button @click="prev">Prev</button> export default { methods: { next() { this.$refs.flickity.next() }, prev() { this.$refs.flickity.previous() }, }, } Este es en realidad el mismo ejemplo de los documentos de uso de vue-flickity .